<template>
  <n-grid x-gap="12" y-gap="6" :cols="3" class="pl-2 font-[13px] desc-panel">
    <n-gi :span="1" class="gray"> 路径： </n-gi>
    <n-gi :span="2">
      <n-breadcrumb class="w-full">
        <n-breadcrumb-item
          v-for="item in curSourceDesc.pathInfo"
          :key="item.id"
          @click="handleBreadClick(item)"
        >
          <n-ellipsis style="max-width: 200px">
            {{ getLabelName(item.id, item.filename) }}
          </n-ellipsis>
        </n-breadcrumb-item>
      </n-breadcrumb>
    </n-gi>

    <n-gi :span="1" class="gray" v-if="curSourceDesc!.isDir"> 当前包含： </n-gi>
    <n-gi :span="2" v-if="curSourceDesc!.isDir">
      {{ curSourceDesc.hasFile + curSourceDesc.hasFolder }}项 (
      {{ curSourceDesc.hasFile }} 文件, {{ curSourceDesc.hasFolder }} 文件夹)
    </n-gi>
    <n-gi :span="1" class="gray"> 大小：</n-gi>
    <n-gi :span="2">
      {{ curSourceDesc!.sizeDesc }}
      {{
        curSourceDesc.file
          ? ` (${addCommas('' + curSourceDesc.file.size)} Byte)`
          : ''
      }}
    </n-gi>
    <n-gi :span="1" class="gray"> 创建时间： </n-gi>
    <n-gi :span="2">
      {{ formatTime(curSourceDesc!.createTime) }}
    </n-gi>
    <n-gi :span="1" class="gray"> 修改时间： </n-gi>
    <n-gi :span="2">
      {{ formatTime(curSourceDesc!.updateTime) }}
    </n-gi>
    <n-gi :span="1" class="gray" v-if="curSourceDesc.Share"> 分享： </n-gi>
    <n-gi :span="2" v-if="curSourceDesc.Share">
      <n-tag
        type="success"
        size="small"
        round
        class="cursor-pointer"
        v-if="curSourceDesc.Share && curSourceDesc.Share.isLink"
        @click="handleToEditShare(0)"
      >
        <n-tooltip trigger="hover">
          <template #trigger>
            <div class="flex items-center">
              <SvgIcon icon="zhuanfa2-copy" class="mr-1"></SvgIcon> 外链分享
            </div>
          </template>
          编辑-外链分享
        </n-tooltip>
      </n-tag>
      <n-tag
        type="info"
        size="small"
        round
        class="cursor-pointer"
        v-if="curSourceDesc.Share && curSourceDesc.Share.isShareTo"
        @click="handleToEditShare(1)"
      >
        <n-tooltip trigger="hover">
          <template #trigger>
            <div class="flex items-center">
              <SvgIcon icon="fenxiang-copy" class="mr-1"></SvgIcon> 协作分享
            </div>
          </template>
          编辑-协作分享
        </n-tooltip>
      </n-tag>
    </n-gi>
    <n-gi
      :span="1"
      class="gray"
      v-if="curSourceDesc.Share && curSourceDesc.Share.isLink"
    >
      外链分享：
    </n-gi>
    <n-gi :span="2" v-if="curSourceDesc.Share && curSourceDesc.Share.isLink">
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-tag type="warning" size="small" round>
            <div class="flex items-center">
              <SvgIcon
                icon="chakan"
                class="mr-1"
                color="#f0a020"
                size="13px"
              ></SvgIcon>
              {{ curSourceDesc.Share.numView }}
            </div>
          </n-tag>
        </template>
        浏览数
      </n-tooltip>

      <n-tooltip trigger="hover">
        <template #trigger>
          <n-tag type="warning" size="small" round class="ml-1">
            <div class="flex items-center">
              <SvgIcon
                icon="xiazai"
                class="mr-1"
                color="#f0a020"
                size="13px"
              ></SvgIcon>
              {{ curSourceDesc.Share.numDownload }}
            </div>
          </n-tag>
        </template>
        下载数
      </n-tooltip>
    </n-gi>
    <n-gi
      :span="1"
      class="gray"
      v-if="curSourceDesc.Share && curSourceDesc.Share.isShareTo"
    >
      协作分享：
    </n-gi>
    <n-gi :span="2" v-if="curSourceDesc.Share && curSourceDesc.Share.isShareTo">
      5项 (2文件, 3文件夹)
    </n-gi>

    <n-gi :span="1" class="gray"> 创建者： </n-gi>
    <n-gi :span="2">
      <div class="flex items-center">
        <n-avatar round :size="16" :src="renderAvator()" class="mr-1" />
        <span>{{ renderUserInfo() }}</span>
      </div>
    </n-gi>
    <n-gi :span="1" class="gray"> 修改者： </n-gi>
    <n-gi :span="2">
      <div class="flex items-center">
        <n-avatar round :size="16" :src="renderAvator()" class="mr-1" />
        <span>{{ renderUserInfo() }}</span>
      </div></n-gi
    >
    <n-gi :span="1" class="gray" v-if="curSourceDesc!.targetType === 2">
      我的权限：
    </n-gi>
    <n-gi :span="2" v-if="curSourceDesc!.targetType === 2">
      <n-tag round size="small">
        <div class="flex items-center">
          <SvgIcon
            icon="yuandian"
            class="mr-1"
            :color="curSourceDesc?.sourceRole?.label || ''"
          ></SvgIcon>
          {{ curSourceDesc?.sourceRole?.name || '无权限' }}
        </div>
      </n-tag>
    </n-gi>
    <n-gi :span="1" class="gray"> 描述说明： </n-gi>
    <n-gi :span="2">
      <div class="flex items-center">
        <n-input
          type="text"
          size="small"
          placeholder="请输入描述说明"
          :disabled="canWriteDesc"
          :value="curSourceDesc.desc || ''"
        />
        <SvgIcon
          v-if="canWriteDesc"
          icon="igw-l-edit"
          class="mx-2 cursor-pointer"
          @click="canWriteDesc = false"
        ></SvgIcon>
        <SvgIcon
          v-else
          icon="gougou"
          class="mx-2 cursor-pointer"
          size="18px"
          @click="canWriteDesc = true"
        ></SvgIcon>
      </div>
    </n-gi>
  </n-grid>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import useExplorerStore from '@/stores/modules/explorer'
import useUserStore from '@/stores/modules/user'
import { BASE_URL } from '@/constants'
import { addCommas, formatTime } from '@/utils'
import DisableUserPic from '@/assets/images/default-avata-disable.jpg'
import defaultUserPng from '@/assets/images/userDefault.png'
import type { IndexObj } from '@/types/commom'
import { events } from '@/utils/bus'
import { navTypeList } from '@/constants/explorer'

const explorerStore = useExplorerStore()
const userStore = useUserStore()
// const { loadSourceRole, sourceRole } = useSourceRole()

const { curSourceDesc }: { curSourceDesc: IndexObj } =
  storeToRefs(explorerStore)

const canWriteDesc = ref(true)

// 可以新增一个接口，获取当前文件的详细信息

const getLabelName = (id: string, label: string) => {
  if (id === userStore.userInfo?.rootSourceId) {
    return '个人空间'
  }
  return label
}

const renderUserInfo = () => {
  if (!curSourceDesc.value.user) {
    return '已删除'
  } else {
    if (userStore.userInfo?.id === curSourceDesc.value.user.id) {
      return '我自己'
    }

    return curSourceDesc.value.user.username
  }
}

const renderAvator = () => {
  if (!curSourceDesc.value.user) {
    return DisableUserPic
  }
  if (!curSourceDesc.value.user.avator) {
    return defaultUserPng
  }

  return BASE_URL + curSourceDesc.value.user.avator
}

// 面包屑被点击，跳转到目标文件夹
const handleBreadClick = (item: IndexObj) => {
  // 这里item信息肯定不够
  // console.log(item)
  events.emit('node-click', {
    nav: {
      key: item.id,
      label: item.filename,
      myType: navTypeList.SOURCE
    }
  })
}

// 跳转到分享编辑页面
const handleToEditShare = (type: number) => {
  events.emit('edit-share', {
    type,
    curSourceDesc: explorerStore.curSourceDesc
  })
}

// 监听curSource的变化，加载权限信息
// watch(
//   () => explorerStore.curSourceDesc!.key,
//   (newValue) => {
//     console.log('key', '111', newValue)

//     if (
//       curSourceDesc.value &&
//       curSourceDesc.value.myType === navTypeList.SOURCE &&
//       +curSourceDesc.value.targetType === 2
//     ) {
//       loadSourceRole(curSourceDesc.value.key)
//     }
//   },
//   {
//     deep: true
//   }
// )
</script>

<style scoped lang="scss">
.desc-panel {
  font-size: 13px;
  .gray {
    color: #999;
  }

  :deep(.n-breadcrumb ul) {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
